Completed
Pull Request — master (#981)
by wiese
110:54 queued 45:53
created

main.js ➔ init   B

Complexity

Conditions 1
Paths 1

Size

Total Lines 24

Duplication

Lines 0
Ratio 0 %

Importance

Changes 1
Bugs 0 Features 0
Metric Value
cc 1
c 1
b 0
f 0
nc 1
dl 0
loc 24
rs 8.9713
nop 0
1
(function ($) {
2
3
	var init = function () {
4
		smoothScroll();
5
6
		ContactInfo();
7
8
		CommentForm();
9
10
		formInfosManager();
11
12
		stateBarMenu();
13
14
15
		heightInfo();
16
17
		containersManager()
18
19
		openCommentItem();
20
21
		// replace select elements
22
		jcf.replaceAll();
0 ignored issues
show
Bug introduced by
The variable jcf seems to be never declared. If this is a global, consider adding a /** global: jcf */ comment.

This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.

To learn more about declaring variables in Javascript, see the MDN.

Loading history...
23
24
		selectedSelect();
25
26
	};
27
28
	$(document).ready(function () {
29
		init();
30
	});
31
32
	$(window).resize(function () {
33
		containersManager();
34
	});
35
36
37
	var openCommentItem = function () {
38
		var $element = $('.supporter-item.wrap-field.commented');
39
		if ($element.length) {
40
			$($element).on("click", function () {
41
				$($element).removeClass("selected notselected");
42
				$('.supporter-item.wrap-field .info-text').removeClass("opened");
43
				$(this).toggleClass("selected");
44
				$(this).children(".info-text").toggleClass("opened");
45
				$(this).prevAll('.wrap-field:first').toggleClass("notselected");
46
			});
47
		}
48
		;
49
	};
50
51
	var containersManager = function () {
52
		var $element = $('.switch-container');
53
		if ($element.length) {
54
			if ($(window).width() < 660) {
55
				$($element).addClass("container-fluid no-gutter");
56
				$($element).removeClass("container");
57
			} else {
58
				$($element).addClass("container");
59
				$($element).removeClass("container-fluid no-gutter");
60
			}
61
		}
62
	};
63
64
	var selectedSelect = function () {
65
		$("select").change(function () {
66
			$(this).closest("span.jcf-select").addClass("selected-item");
67
			$(this).next("span").addClass("selected-item");
68
		});
69
		$(".country-select").closest("span.jcf-select").addClass("selected-item");
70
		$(".country-select").next("span").addClass("selected-item");
71
	};
72
73
	var heightInfo = function () {
74
75
		$(".info-text").on("change", "input, select", function () {
76
			$(this).closest("fieldset").css("min-height", 0);
77
			var fieldsetHeight = $(this).closest("fieldset").height();
78
			var formHeight = $(this).closest(".info-text").outerHeight();
79
			if($(this).closest("fieldset").prop("id") == "payment-method") {
80
				formHeight = formHeight + fieldsetHeight;
81
			}
82
			$(this).closest("fieldset").css("min-height", formHeight + "px");
83
		});
84
	};
85
86
	var formInfosManager = function () {
87
		var $element = $("section.donation-amount");
88
		if ($element.length) {
89
90
			$(".show-info input[type=radio]").on("click", function () {
91
				var id = this.id
92
				var fieldsetId = $(this).parents("fieldset").prop("id");
93
94
				$('fieldset#' + fieldsetId).css("min-height", 0);
95
				var fieldsetHeightBefore = $('fieldset#' + fieldsetId).height();
96
				console.log("fieldsetHeightBefore " + fieldsetHeightBefore);
0 ignored issues
show
Debugging Code introduced by
console.log looks like debug code. Are you sure you do not want to remove it?
Loading history...
97
				if (fieldsetId != 'type-membership') {
98
					$('fieldset#' + fieldsetId + ' .wrap-field').removeClass("selected notselected");
99
					$('fieldset#' + fieldsetId + ' .info-text').removeClass("opened");
100
					$('[data-info="' + id + '"]').toggleClass("opened");
101
					if ($('[data-info="' + id + '"]').hasClass("opened")) {
102
						var formHeight = $('[data-info="' + id + '"]').outerHeight();
103
						$(this).closest(".show-info").css("min-height", (formHeight - fieldsetHeightBefore) + "px");
104
					};
105
					$(this).parents(".wrap-field").toggleClass("selected");
106
					$(this).parents(".selected").prevAll('.wrap-field:first').toggleClass("notselected");
107
				}
108
			});
109
110
			if ($(window).width() < 1200) {
111
				$("#overview").on("click", ".wrap-field.completed .wrap-input,  .wrap-field.invalid .wrap-input", function (e) {
112
					e.preventDefault();
113
					$(this).closest(".wrap-field").toggleClass("opened");
114
					$(this).toggleClass("opened");
115
					$(this).next(".info-text-bottom").toggleClass("opened");
116
				});
117
			}
118
		}
119
	};
120
121
122
	var stateBarMenu = function () {
123
124
		var ACTIVE_THRESHOLD = 55;
125
126
		$.fn.isVisible = function (type) {
127
			// Current distance from the top of the page
128
			var windowScrollTopView = $(window).scrollTop();
129
			// Current distance from the top of the page, plus the height of the window
130
			var windowBottomView = windowScrollTopView + $(window).height();
131
			// Element distance from top
132
			var elemTop = $(this).offset().top;
133
			// Element distance from top, plus the height of the element
134
			if (type == "top") {
135
				offset = 50;
0 ignored issues
show
Bug introduced by
The variable offset seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.offset.
Loading history...
136
			} else {
137
				offset = +380;
138
			}
139
			var elemBottom = elemTop + $(this).height() + offset;
140
			//console.log("wTop " + windowScrollTopView + " wB " + windowBottomView  + " eTop" + elemTop);
141
			return ((elemBottom <= windowBottomView) && (elemTop >= windowScrollTopView));
142
		};
143
144
145
		if ($('.state-bar').length == 0) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
146
		var fixBarTop = $('.state-bar').offset().top;
147
		var donationSection = $("#donation-amount").offset().top;
148
		var donationPaymentSection = $("#donation-payment").offset().top;
149
		var donationTypeSection = $("#donation-type").offset().top;
150
151
152
		if ($(window).width() < 1023) {
153
			$(window).scroll(function () {
154
				var currentScroll = $(window).scrollTop();
155
				if (currentScroll + 70 >= fixBarTop) {
156
					$('.state-bar').addClass('active');
157
					$('.menu-main').addClass('under-bar');
158
					if ($('.footer').isVisible('top')) {
159
						$(".state-bar").removeClass('active');
160
						$('.menu-main').removeClass('under-bar');
161
					} else {
162
						$(".state-bar").addClass('active');
163
						$('.menu-main').addClass('under-bar');
164
					}
165
				} else {
166
					$('.state-bar').removeClass('active');
167
					$('.menu-main').removeClass('under-bar');
168
				}
169
				if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
170
					$('.state-overview .amount').addClass('enabled');
171
				} else {
172
					$('.state-overview .amount').removeClass('enabled');
173
				}
174
			});
175
		} else {
176
			$(window).scroll(function () {
177
				var currentScroll = $(window).scrollTop();
178
				if ($('body#donation').length) {
179
					var initialTop = 200;
180
				} else if ($('body#membership').length) {
181
					var initialTop = 650;
0 ignored issues
show
Comprehensibility Naming Best Practice introduced by
The variable initialTop already seems to be declared on line 179. Consider using another variable name or omitting the var keyword.

This check looks for variables that are declared in multiple lines. There may be several reasons for this.

In the simplest case the variable name was reused by mistake. This may lead to very hard to locate bugs.

If you want to reuse a variable for another purpose, consider declaring it at or near the top of your function and just assigning to it subsequently so it is always declared.

Loading history...
182
				}
183
184
185
				if (currentScroll >= initialTop) {
0 ignored issues
show
Bug introduced by
The variable initialTop does not seem to be initialized in case $("body#membership").length on line 180 is false. Are you sure this can never be the case?
Loading history...
186
					$('.state-overview .wrap-bar').addClass('fixed');
187
					//console.log("wrap bar" + currentScroll);
188
				} else {
189
					$('.state-overview .wrap-bar').removeClass('fixed');
190
				}
191
192
193
				if (($('.state-bar-lateral .wrap-bar').outerHeight() + $('.state-bar-lateral .wrap-bar').offset().top ) > ( $('.form-shadow-wrap').offset().top + $('.form-shadow-wrap').outerHeight() + 150)) {
194
					$('.state-bar-lateral').removeClass('active');
195
				} else {
196
					$('.state-bar-lateral').addClass('active');
197
				}
198
199
				/*if ($(".overview").isVisible('lateral') || $('#other-info').isVisible('lateral')) {
200
				 $(".state-bar-lateral").removeClass('active');
201
				 } else {
202
				 $(".state-bar-lateral").addClass('active');
203
				 }*/
204
			});
205
		}
206
207
208
		if ($("body#membership").length) {
209
			var memberTypeSection = $("#membership-type").offset().top;
210
			$(window).scroll(function () {
211
				var currentScroll = $(window).scrollTop();
212
				var typeMemberElements = $('.state-overview .member-type');
213
				var donatorElements = $('.state-overview .donator-type');
214
				var amountElements = $('.state-overview .amount');
215
				var paymentElemnts = $('.state-overview .payment-method');
216
217
				typeMemberElements.removeClass('enabled');
218
				donatorElements.removeClass('enabled');
219
				amountElements.removeClass('enabled');
220
				paymentElemnts.removeClass('enabled');
221
				ACTIVE_THRESHOLD = 60;
222
				if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
223
					paymentElemnts.addClass('enabled');
224
				}
225
				else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
226
					amountElements.addClass('enabled');
227
				}
228
				else if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
229
					donatorElements.addClass('enabled');
230
				}
231
				else if (currentScroll >= memberTypeSection - ACTIVE_THRESHOLD) {
232
					typeMemberElements.addClass('enabled');
233
				}
234
			});
235
		} else {
236
			$(window).scroll(function () {
237
				var currentScroll = $(window).scrollTop();
238
				var amountElements = $('.state-overview .amount');
239
				var paymentElemnts = $('.state-overview .payment-method');
240
				var donatorElements = $('.state-overview .donator-type');
241
242
				amountElements.removeClass('enabled');
243
				paymentElemnts.removeClass('enabled');
244
				donatorElements.removeClass('enabled');
245
				if (currentScroll >= donationTypeSection - ACTIVE_THRESHOLD) {
246
					donatorElements.addClass('enabled');
247
				}
248
				else if (currentScroll >= donationPaymentSection - ACTIVE_THRESHOLD) {
249
					paymentElemnts.addClass('enabled');
250
				}
251
				else if (currentScroll >= donationSection - ACTIVE_THRESHOLD) {
252
					amountElements.addClass('enabled');
253
				}
254
			});
255
		}
256
257
	};
258
259
	var submitValidation = function () {
260
		var isValid = true;
261
		$('form').find('input, textarea').each(function () {
262
			if ($(this).val() == "" || !this.checkValidity()) {
263
				$(this).addClass('invalid');
264
				$(this).parent().addClass('invalid');
265
				isValid = false;
266
			}
267
			else {
268
				$(this).removeClass('invalid');
269
				$(this).parent().removeClass('invalid');
270
        $(this).addClass('valid');
271
        $(this).parent().addClass('valid');
272
			}
273
		});
274
		return isValid;
275
	};
276
277
	var ContactInfo = function () {
278
		var form = $('#contact-form');
279
		if (form.length == 0) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
280
		form.submit(submitValidation);
281
		form.find('input[type="submit"]').click(submitValidation);
282
283
    form.find('input, textarea').keypress(function () {
284
      $(this).data('data-entered', true);
285
    });
286
287
    form.find('input, textarea').blur(function () {
288
      if (!$(this).data('data-entered')) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
289
290
      if ($(this).val() == "" || !this.checkValidity()) {
291
        $(this).addClass('invalid');
292
        $(this).parent().addClass('invalid');
293
        isValid = false;
0 ignored issues
show
Bug introduced by
The variable isValid seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.isValid.
Loading history...
294
      }
295
      else {
296
        $(this).removeClass('invalid');
297
        $(this).parent().removeClass('invalid');
298
        $(this).addClass('valid');
299
        $(this).parent().addClass('valid');
300
      }
301
    });
302
	};
303
304
	var CommentForm = function () {
305
		var form = $('#comment-form');
306
		if (form.length == 0) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
307
		form.submit(submitValidation);
308
		form.find('input[type="submit"]').click(submitValidation);
309
310
    form.find('input, textarea').keypress(function () {
311
      $(this).data('data-entered', true);
312
    });
313
314
    form.find('input, textarea').blur(function () {
315
      if (!$(this).data('data-entered')) return;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
316
317
      if ($(this).val() == "" || !this.checkValidity()) {
318
        $(this).addClass('invalid');
319
        $(this).parent().addClass('invalid');
320
        isValid = false;
0 ignored issues
show
Bug introduced by
The variable isValid seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using window.isValid.
Loading history...
321
      }
322
      else {
323
        $(this).removeClass('invalid');
324
        $(this).parent().removeClass('invalid');
325
        $(this).addClass('valid');
326
        $(this).parent().addClass('valid');
327
      }
328
    });
329
	};
330
331
	var smoothScroll = function () {
332
		$('a[href*="#"]')
333
			// Remove links that don't actually link to anything
334
			.not('[href="#"]')
335
			.not('[href="#0"]')
336
			.click(function (event) {
337
				if (!$(this).closest(".wrap-field.completed").length) {
338
					// On-page links
339
					if (
340
						location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
341
						&&
342
						location.hostname == this.hostname
343
					) {
344
						// Figure out element to scroll to
345
						var target = $(this.hash);
346
						target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
347
						// Does a scroll target exist?
348
						if (target.length) {
349
							// Only prevent default if animation is actually gonna happen
350
							event.preventDefault();
351
							$('html, body').animate({
352
								scrollTop: target.offset().top - 55
353
							}, 1000, function () {
354
								// Callback after animation
355
								// Must change focus!
356
								var $target = $(target);
357
								$target.focus();
358
								if ($target.is(":focus")) { // Checking if the target was focused
359
									return false;
360
								} else {
361
									$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
362
									$target.focus(); // Set focus again
0 ignored issues
show
Best Practice introduced by
There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.
Loading history...
363
								}
364
							});
365
						}
366
					}
367
				}
368
			});
369
	};
370
371
372
})(jQuery);
373